<template>
  <view>
    <!-- 精选 -->
    <view class="contain">
      <view class="first" v-for="item in follow" :key="item.id">
        <!-- 关注 -->
        <view class="keey"> +关注 </view>
        <!-- 关注 -->
        <view class="contain-top">
          <image class="contain-top-image" src="./bg.png" mode="" @click="userinfo"></image>
          <view class="right">
            <view class="top">
              <view class="name">
                {{ item.name }}
              </view>
              <view class="bq">
                {{ item.bq }}
              </view>
            </view>
            <view class="time">
              {{ item.time }}
            </view>
          </view>
        </view>
        <view class="text">
          <span>{{ item.smtit }}</span>
          <view class="bq">
            {{ item.status }}
          </view>
        </view>
        <view class="first-main">
          <view class="title" @tap="goInfo">
            {{ item.neirong }}
          </view>
          <view class="img">
            <image
              class="image"
              :src="v"
              v-for="(v, i) in item.imgs"
              :key="i"
              mode=""
              @tap="showBigImg(v)"
            ></image>
            <!-- <image class="image" src="./bg.png" mode=""></image>
            <image class="image" src="./bg.png" mode=""></image>
            <image class="image" src="./bg.png" mode=""></image>
            <image class="image" src="./bg.png" mode=""></image>
            <image class="image" src="./bg.png" mode=""></image>
            <image class="image" src="./bg.png" mode=""></image> -->
          </view>
          <view class="button">
            <view class="left">
              <image class="left-img" src="./DZ.jpg" mode=""></image>
            </view>
            <view class="right">
              <view class="lj">
                <!-- <image src="./m-base.png" mode=""></image> -->
                <u-icon name="share" color="#ccc" size="40"></u-icon>
                <span>9</span>
              </view>
              <view class="lj">
                <!-- <image src="./m-base.png" mode=""></image> -->
                <u-icon name="chat" color="#ccc" size="40"></u-icon>
                <span>7</span>
              </view>
              <view class="lj">
                <!-- <image src="./m-base.png" mode=""></image> -->
                <u-icon name="star" color="#ccc" size="40"></u-icon>
                <span>9</span>
              </view>
              <view class="lj">
                <!-- <image src="./m-base.png" mode=""></image> -->
                <u-icon name="thumb-up" color="#ccc" size="40"></u-icon>
                <span>54</span>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "community-selected",
  data() {
    return {
      follow: [
        {
          id: 1,
          name: "C***着",
          bq: "运动员",
          time: "2022-09-12 12:00",
          smtit: "跑步人的一天",
          status: "审核中",
          neirong:
            "SDKsad脑壳is阿里你哦23离开你搜电视里，啊落地哦1 看到你无论是拉可能点哦强迫我觉得前五名的请问你都去我看驱蚊器沃恩请我们请我其ID我红藕no彼迪1312偶就都爱的亲我只你",
          imgs: [
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
          ],
        },
        {
          id: 2,
          name: "A***着",
          bq: "明星",
          time: "2023-09-12 12:00",
          smtit: "跑步人的二天",
          status: "审核中",
          neirong:
            "SDKsad脑壳is阿里你哦23离开你搜电视里，啊落地哦1 看到你无论是拉可能点哦强迫我觉得前五名的请问你都去我看驱蚊器沃恩请我们请我其ID我红藕no彼迪1312偶就都爱的亲我只你",
          imgs: [
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
          ],
        },
      ],
    };
  },
  methods: {
    goInfo() {
      uni.navigateTo({
        url: "/pages/community/topiclist/topiclist",
      });
    },
	userinfo(){
		 uni.navigateTo({
		 	 url: "/pages/community/personalCenter/personalCenter",
		 })
	},
    //点击放大图片
    showBigImg(img) {
      let arr = [];
      arr.push(img);
      console.log(arr, "图片的地址");
      uni.previewImage({
        current: 0,
        urls: arr, //必须是网址路径，否则加载不出来，如：http：或https：
      });
    },
  },
};
</script>

<style lang="scss">
.contain{
	width: 750rpx;
	// height: 1210rpx;
	background-color: #FFFFFF;
	padding:0 20rpx ;
	.first{
		width: 100%;
		// height: 600rpx;
		// border: 1px solid red;
		margin-bottom: 40rpx;
		position: relative;
		.keey{
			position: absolute;
			width: 104rpx;
			height: 48rpx;
			border-radius: 24rpx;
			line-height: 48rpx;
			color: #FF5C58;;
				
				top: 10rpx;
				right: 30rpx;
				border: 1rpx solid red($color: #000000);
				background-color:#ffcdd1 ;
				text-align: center;
				
		}
		.contain-top{
			width: 100%;
			height: 150rpx;
			// border: 1px solid red;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.contain-top-image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.right{
				width: 300rpx;
				height: 100%;
				// border: 1px solid red;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex-wrap: wrap;
				.top{
					width: 100%;
					height:75rpx ;
					// border: 1px solid red;
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					.name{
						margin-right: 20rpx;
						font-size: 30rpx;
					}
					.bq{
						border-radius: 10rpx;
						height: 40rpx;
						background-color:#15f6a4;
						font-size: 16rpx;
						line-height: 20rpx;
						color: #12CA87;
						padding: 10rpx;
					}
				}
				.time{
					width: 100%;
					height:75rpx ;
					// border: 1px solid red;
					&:hover{
						color: #cacaca;
					}
				}
			}
		}
		.text{
			font-size:30rpx ;
			font-weight: 400;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 60rpx;
			// border: 1px solid red;
			margin-bottom: 10rpx;
			.bq{
				font-size: 10rpx;
				background-color:#b2b2b2 ;
				padding: 0 20rpx;
				margin-left: 20rpx;
			}
		}
		.first-main{
			width: 100%;
			// height: 200rpx;
			// border: 1px solid red;
		
			.title{
				 text-overflow: -o-ellipsis-lastline;
				  overflow: hidden;
				  text-overflow: ellipsis;
				  display: -webkit-box;
				  -webkit-line-clamp: 3;
				  line-clamp: 2;
				  -webkit-box-orient: vertical;
				  	margin-bottom: 20rpx;
			}
			.img{
				width: 100%;
				.image{
					width: 220rpx;
					height: 150rpx;
					margin:0 8rpx;
					border-radius: 10rpx;
					overflow: hidden;
				}
			}
			.button{
				width: 100%;
				height: 60rpx;
				// border: 1rpx solid red;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					.left-img{
						width: 300rpx;
						height: 40rpx;
					}
				}
				.right{
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 400rpx;
					height: 60rpx;
					// border: 1px solid red;
					.lj{
						width: 100%;
						height: 100%;
						// border: 1px solid blue;
						display: flex;
						align-items: center;
						justify-content: space-around;
						margin-right: 5rpx;
						image{
							width: 40rpx;
							height: 40rpx;
							// border: 1px solid #FF3C2A;
							
						}
					}
				}
			}
		}
	}
}
</style>
